<template>
	<div>
		<el-container>
			<el-aside>
				<Navigation/>
			</el-aside>
			<el-container>
				<el-header>
					<BreadCrumb :navName="navs"/>
				</el-header>
				<el-main>
					<div>
						<!-- <div class="searchArea">
							<el-input v-model="query.keywords" placeholder="关键字搜索"/>
							<el-button type="primary" @click="loadData()">搜索</el-button>
						</div> -->
						<div class="searchArea">
              <div class="searchArea1">
                <el-row>
                  <el-col :span="5">
                    <el-input v-model="query.name" clearable placeholder="关键字搜索"/>
                  </el-col>
                  <el-col :span="3">
                    <el-button type="primary" @click="loadData()">搜索</el-button>
                  </el-col>
                  <el-col :span="3" class="addVer">
                    <el-button @click="viewWare2()" type="primary">添加</el-button>
                  </el-col>
                </el-row>
              </div>
						</div>

						<div>
							<el-table
								:data="venderData"
								style="width: 100%">
								<el-table-column
								prop="id"
								label="商户编号"
								width="180">
								</el-table-column>
								<el-table-column
								prop="name"
								label="商户名称"
								width="180">
								</el-table-column>
								<el-table-column
								prop="shopAddress"
								label="店铺地址"
                width="500">
								</el-table-column>
								<el-table-column
								prop="handler"
								label="操作">
								    <template slot-scope="scope">
                      <el-button @click="viewWare(scope.row)" type="text" size="small">查看</el-button>
                    </template>
								</el-table-column>
							</el-table>
						</div>


						<div class="block paginationStyle">
							<el-pagination
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page="query.pageNo"
							:page-sizes="[20,40,100]"
							:page-size="query.pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="query.totalSize">
							</el-pagination>
						</div>

					</div>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	import Navigation from '../Navigation'
	import BreadCrumb from '../BreadCrumb'
	export default{
		name:'VenderList',
		methods: {
		  //每页多少条数据
			handleSizeChange(val){
				this.query.pageSize = val;
				this.loadData();
			},
      //当前第几页
			handleCurrentChange(val){
				this.query.pageNo = val;
				this.loadData();
			},
      //跳转商品详情方法
			viewWare(row){
				this.$router.push('/vender/'+row.id);
			},
      viewWare2() {
			  this.$router.push('/vender/add');
      },
      //加载商户分页信息
			loadData(){
				var that = this;
				this.$api.post('/vender/page',that.query,function(data){
					if(data.flag=="success"){
						that.query.totalSize = data.data.total;
						that.venderData = data.data.records;
					}else{
						this.$message.error(data.msg);
					}
				});
			}
		},
    mounted(){
		  this.loadData();
    },
		data:function(){
			return {
				query:{
				  name:"",
					pageNo:1,
					pageSize:40,
					totalSize:0
				},
				navs:["商户数据管理","商户列表"],
				venders:[],
				venderData:[]
			}
		},
		components:{
			Navigation,
			BreadCrumb
		}
	}
</script>

<style scoped>

	.searchArea{
		margin-bottom: 15px;
	}

  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
  .el-input{
	width: 220px !important;
  }
  .paginationStyle{
	  margin-top: 15px;
	  float:right;
  }

  .addVer{
    float: right;
  }
</style>
